<template>
  <el-container style="max-height: 100%; padding: 0px">
    <el-main style="padding: 0px">
      <div ref="tabcard">
        <el-tabs type="border-card" style="border-bottom: 0px">
          <el-tab-pane style="padding-top: 0px">
            <template slot="label">
              <div>
                <svg-icon icon-class="cluster-tab-monitor" />
                <span>当前集群信息</span>
              </div>
            </template>
            <el-form
              label-position="left"
              class="demo-table-expand"
              label-width="70px"
            >
              <el-form-item label="集群编号">
                <span>{{ nodeInfo.preId }}</span>
              </el-form-item>
              <el-form-item class="input-item-class" label="集群名称">
                <span>{{ nodeInfo.name }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ nodeInfo.createTime }}</span>
              </el-form-item>
              <el-form-item label="创建人">
                <span>{{ nodeInfo.createUser }}</span>
                <span v-if="nodeInfo.createUserName != ''">
                  ({{ nodeInfo.createUserName }})
                </span>
              </el-form-item>
              <el-form-item label="描述">
                <span>{{ nodeInfo.description }}</span>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane>
            <template slot="label">
              <div>
                <svg-icon icon-class="nested" />
                <span>当前节点机器列表</span>
              </div>
            </template>
            <el-row>
              <el-col :span="24" align="left" style="margin-bottom: 10px">
                <el-button
                  v-waves
                  v-has="hasButtons.addbutton"
                  class="filter-item"
                  type="primary"
                  icon="el-icon-plus"
                  @click="createMachine"
                >
                  添加机器
                </el-button>
              </el-col>
            </el-row>

            <el-table :data="nodeInfo.machines" style="width: 100%" border>
              <el-table-column
                prop="preId"
                :label="tempDesc.preId"
                width="300px"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="name"
                :label="tempDesc.name"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="ip"
                :label="tempDesc.ip"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="description"
                :label="tempDesc.description"
                align="center"
              ></el-table-column>
              <el-table-column
                v-if="
                  global_checkBtnPermission([
                    hasButtons.deletebutton,
                    hasButtons.editbutton,
                  ])
                "
                label="操作"
                width="200px"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    v-has="hasButtons.editbutton"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    plain
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                    编辑
                  </el-button>

                  <cus-del-btn
                    v-has="hasButtons.deletebutton"
                    @ok="handleDelete(scope.$index, scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  const tempDesc = {
    oid: '主键',
    preId: '机器编号',
    nodeId: '业务ID',
    name: '机器名称',
    ip: 'ip地址',
    description: '描述',
  }
  const hasButtons = {
    addbutton: 'clusterMonitor:ClusterNodeManage:addmachine',
    deletebutton: 'clusterMonitor:ClusterNodeManage:delmachine',
    editbutton: 'clusterMonitor:ClusterNodeManage:editmachine',
  }
  export default {
    name: 'NodeDetail',
    props: {
      dataSource: {
        type: Array,
        required: false,
        default: () => {
          return [
            {
              preId: '2016-05-02',
              name: '王小虎',
              ip: '上海市普陀区金沙江路 1518 弄',
            },
            {
              preId: '2016-05-04',
              name: '王小虎',
              ip: '上海市普陀区金沙江路 1517 弄',
            },
            {
              preId: '2016-05-01',
              name: '王小虎',
              ip: '上海市普陀区金沙江路 1519 弄',
            },
            {
              preId: '2016-05-03',
              name: '王小虎',
              ip: '上海市普陀区金沙江路 1516 弄',
            },
          ]
        },
      },
      nodeInfo: {
        type: Object,
        required: false,
        default: () => {
          return {
            name: 'default',
          }
        },
      },
    },
    data() {
      return {
        hasButtons: hasButtons,
        tempDesc: tempDesc,
      }
    },
    methods: {
      //新建机器
      createMachine: function () {
        this.$emit('change', this.nodeInfo)
      },
      //编辑机器
      handleEdit: function (index, row) {
        this.$emit('update', row)
      },
      //删除机器
      handleDelete: function (index, row) {
        this.$emit('delete', row)
      },
    },
  }
</script>

<style scoped></style>
